<template>
  <div class="header">
    <div class="cover">
      <img :src="blog.cover" alt="">
    </div>
    <div class="info">
      <div class="title"><h1>{{ blog.title }}</h1></div>
      <div class="author"><p>Written By: {{ blog.authorName}}</p></div>
      <div class="time"><p>Published On: {{ formatTime(blog.createTime)}}</p></div>
    </div>
  </div>

  <div class="wrapper">
    <div class="content" v-html="blog.content">
    </div>
  </div>
</template>

<script setup>
import { blogGetByIdService } from '@/api/blog';
import { formatTime } from '@/utils/format';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const blogRouteId = ref(route.params.id);

const blog = ref({})


async function getBlogDetail(){
  const res = await blogGetByIdService(blogRouteId.value)
  blog.value = res.data.data  
}

onMounted(() => {
  getBlogDetail()
}) 

</script>



<style scoped lang="less">
.header {
  position: relative;
  .cover {
    height: 600px;
    img {
      object-fit: cover;
    }
  }
  .info {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    width: 100%;
    height: 100px;
    color: white;
    text-align: center;
    h1 {
      background-color: rgba(0, 0, 0, 0.4);
      font-weight: 700;
      font-size: 60px;
    }
    p {
      font-size: 30px;
    }
  }
}

.content {
  margin-top: 50px;
  font-size: 25px;
  line-height: 40px;
  color: #4d4d4d;
}
</style>